<template>
  <div class="login">
    <header>
      <van-icon name="arrow-left" />
      <span>账号登陆</span>
      <span></span>
    </header>
    <main>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true}]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true}]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </main>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "admin",
      password: "admin"
    };
  },
  methods: {
    onSubmit(values) {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "登陆中",
        loadingType: "spinner"
      });
      console.log(toast);
      this.$http.login(values).then(res => {
        if (res.data.status === 200) {
          Toast.clear();
          sessionStorage.setItem("token", res.data.body.token);
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 18px;
  margin-bottom: 20px;
  i {
    font-size: 20px;
  }
}
.van-cell {
  margin-bottom: 20px;
}
button {
  display: block;
  outline: 0 none;
  -webkit-appearance: none;
  padding: 0;
  text-align: center;
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: nowrap;
  color: #fff;
  background-color: #1cb676;
  border: 1px solid #1cb676;
  border-radius: 2px;
  width: 100%;
}
</style>
